Flutter এ বেসিক Animations

Flutter এ বেসিক Animations ব্যবহার করে UI কে আরও প্রাণবন্ত এবং ইন্টারেক্টিভ করা যায়। Flutter এর animation framework ব্যবহার করে সহজেই ফেইড ইন/আউট, স্লাইড, স্কেল, রোটেশন, ইত্যাদি বিভিন্ন অ্যানিমেশন তৈরি করা সম্ভব। নিচে বেসিক অ্যানিমেশন সেটআপ করার ধাপ এবং উদাহরণ আলোচনা করা হলো।

Flutter এ অ্যানিমেশন সেটআপ করার ধাপ:

ধাপ ১: একটি StatefulWidget তৈরি করা:

• অ্যানিমেশন পরিচালনা করার জন্য StatefulWidget ব্যবহার করতে হবে, কারণ অ্যানিমেশন চলাকালীন স্টেট পরিবর্তন হয় এবং Widget পুনরায় রেন্ডার হতে পারে।

ধাপ ২: AnimationController এবং Animation সেটআপ করা:

• AnimationController একটি ক্লাস যা অ্যানিমেশন শুরু, থামানো এবং রিপ্লে করার জন্য ব্যবহৃত হয়।
• Animation একটি ক্লাস যা অ্যানিমেশন এর মান পরিবর্তন করে, যা AnimationController দ্বারা নিয়ন্ত্রিত হয়।

ধাপ ৩: initState মেথডে অ্যানিমেশন কনফিগার করা:

• AnimationController এবং Animation সেটআপ করা হয় এবং তাদের জন্য প্রয়োজনীয় ডিউরেশন (সময়) এবং অন্যান্য প্যারামিটার দেওয়া হয়।

Flutter এ একটি বেসিক অ্যানিমেশন উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic Animation Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation Demo'),
        ),
        body: Center(
          child: AnimatedBox(),
        ),
      ),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller)
      ..addListener(() {
        setState(() {});
      });

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  }
}

উদাহরণের ব্যাখ্যা:

AnimationController:

• _controller হলো একটি AnimationController যা ২ সেকেন্ডের ডিউরেশন নিয়ে কনফিগার করা হয়েছে।
• vsync এর জন্য SingleTickerProviderStateMixin ব্যবহার করা হয়েছে, যা অ্যানিমেশন ফ্রেমের সময় নির্ধারণ করে।

Animation এবং Tween:

• _animation একটি Tween এর মাধ্যমে কনফিগার করা হয়েছে, যা ৫০ থেকে ২০০ পিক্সেল পর্যন্ত আকার পরিবর্তন করে।
• addListener দিয়ে প্রতিটি ফ্রেমে setState কল করা হয়েছে, যাতে UI আপডেট হয়।

repeat এবং reverse:

• _controller.repeat(reverse: true) ব্যবহার করে অ্যানিমেশনটি বারবার চালানো হয় এবং রিভার্স হয়ে আবার শুরু হয়।

Flutter এর বেসিক অ্যানিমেশনের কিছু প্রকার:

১. Fade Transition (ফেইড ট্রানজিশন):

• FadeTransition ব্যবহার করে একটি Widget এর opacity পরিবর্তন করা যায়।
• উদাহরণ:

FadeTransition(
  opacity: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

২. Scale Animation (স্কেল অ্যানিমেশন):

• ScaleTransition ব্যবহার করে একটি Widget এর আকার পরিবর্তন করা যায়।
• উদাহরণ:

ScaleTransition(
  scale: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

৩. Rotation Animation (রোটেশন অ্যানিমেশন):

• RotationTransition ব্যবহার করে একটি Widget কে ঘুরানো যায়।
• উদাহরণ:

RotationTransition(
  turns: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

AnimatedWidget এবং AnimatedBuilder:

Flutter এ অ্যানিমেশন পরিচালনা করতে AnimatedWidget এবং AnimatedBuilder ক্লাস ব্যবহার করা হয়।

AnimatedWidget:

• এটি একটি সহজ উপায় যেখানে একটি Widget এর পরিবর্তন সহজে দেখা যায়।
• উদাহরণ:

class ScalingBox extends AnimatedWidget {
  ScalingBox({Key? key, required Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Container(
      width: animation.value,
      height: animation.value,
      color: Colors.orange,
    );
  }
}

AnimatedBuilder:

• এটি একটি ফাংশনাল স্টাইল যা Widget এর গঠন আরও ম্যানেজেবল করে।
• উদাহরণ:

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Transform.scale(
      scale: _animation.value,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.purple,
  ),
)

Flutter এর প্রি-বিল্ট অ্যানিমেটেড Widgets:

Flutter এ কিছু প্রি-বিল্ট অ্যানিমেটেড Widgets রয়েছে যা সহজেই ব্যবহার করা যায়:

• AnimatedContainer: একটি Container এর বিভিন্ন প্রপার্টি (যেমন সাইজ, কালার) পরিবর্তন করতে।
• AnimatedOpacity: একটি Widget এর opacity পরিবর্তন করতে।
• AnimatedPositioned: Positioned Widget এর স্থান পরিবর্তন করতে।
• AnimatedAlign: Widget এর অ্যালাইনমেন্ট পরিবর্তন করতে।

AnimatedContainer উদাহরণ:

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: _isExpanded ? 200.0 : 100.0,
  height: _isExpanded ? 200.0 : 100.0,
  color: _isExpanded ? Colors.blue : Colors.red,
  child: Text('Tap to Animate'),
)

Flutter এ বেসিক অ্যানিমেশন সংক্ষেপে:

• AnimationController এবং Animation ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা যায়।
• FadeTransition, ScaleTransition, এবং RotationTransition এর মতো প্রি-বিল্ট অ্যানিমেটেড Widgets ব্যবহার করে সহজেই অ্যানিমেশন তৈরি করা যায়।
• AnimatedWidget এবং AnimatedBuilder ব্যবহার করে Widget এর অ্যানিমেশন সহজ এবং কার্যকর উপায়ে কাস্টমাইজ করা যায়।
• AnimatedContainer এর মত প্রি-বিল্ট ক্লাস দিয়ে আরও দ্রুত এবং সহজে অ্যানিমেশন করা যায়।

Flutter এ এই বেসিক অ্যানিমেশনগুলো ব্যবহার করে আপনার অ্যাপের UI কে আরও প্রাণবন্ত এবং ইন্টারেক্টিভ করা সম্ভব।